<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>赛事预约列表页面</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function(){
            $.ajax({
                url: "/api/v1/game/info/user",
                type: "GET",
                data:{},
                crossDomain: true, // 跨域，即不同域名、端口号可以访问
                contentType: 'application/json; charset=utf-8',  // 请求体数据格式 json字符串
                success:function(d){
                    //alert("ok")
                    if(d['status']==500){
                        alert(d['data']);
                    }
                    if(d['status']==200){
                        show(d['data']);
                    }
                },
                error:function(){},
                dataType:"json"
            });

            function show(data){

                // 遍历每场赛事，i索引 j赛事对象
                $.each(data,function (i,j){
                    // 每场赛事的按钮id必须区分开
                    $("#game").append("<tr><td>"+j['bookId']+"</td>"+"<td>"+j['gameId']+"</td>"+"<td>"+j['gameName']+"</td>"+
                        "<td>"+j['gameIntroduction']+"</td>"+ "<td>"+j['gameSponsor']+"</td>"+ "<td>"+j['gameTime']+"</td>"+
                        "<td>"+j['periods']+"</td>"+"<td>"+j['gameType']+"</td>"+ "<td>"+j['gameState']+"</td>"+
                        "<td>"+j['auditState']+"</td>"+"<td>"+j['remark']+"</td>");

                });

            }

        });

    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12" style="height: 400px">
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            预约编号
                        </th>
                        <th>
                            赛事编号
                        </th>
                        <th>
                            赛事名称
                        </th>
                        <th>
                            赛事简介
                        </th>
                        <th>
                            赛事主办单位
                        </th>
                        <th>
                            赛事举办日期
                        </th>
                        <th>
                            当天场次
                        </th>
                        <th>
                            赛事类型
                        </th>
                        <th>
                            赛事状态
                        </th>
                        <th>
                            审核状态
                        </th>
                        <th>
                            备注
                        </th>
                    </tr>
                    </thead>
                    <tbody id="game">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>
</html>